﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Data Attributes</li>
        </ul>
        <div class="alert">
            A list of all available data attributes that can be used within FooTable
		</div>
        <table class="table table-bordered toggle-square-filled">
            <thead style="display: none">
                <tr>
                    <th>Name</th>
                    <th data-hide="all">Description</th>
                    <th data-hide="all">Example</th>
                </tr>
            </thead>
            <tbody>
                <tr class="footable-disabled">
                    <td colspan="3"><h4>Core Data Attributes</h4></td>
                </tr>
                <tr>
                    <td><code>data-class</code></td>
                    <td>Use to specify a CSS class to apply to all cells in a column.</td>
                    <td><pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-class=&quot;highlight&quot;&gt;Column&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre>
                    </td>
                </tr>
                <tr>
                    <td><code>data-hide</code></td>
                    <td>Use to specify at which breakpoints to hide the column. Separate multiple breakpoints using a comma.</td>
                    <td>
                        <pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;Column always shown&lt;/th&gt;
        &lt;th data-hide=&quot;phone,tablet&quot;&gt;Column hidden on phone and tablet&lt;/th&gt;
        &lt;th data-hide=&quot;all&quot;&gt;Column always hidden&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre>
                    </td>
                </tr>
                <tr>
                    <td><code>data-ignore</code></td>
                    <td>This will stop the column being included in the detail row creation.</td>
                    <td><pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-ignore=&quot;highlight&quot;&gt;Column will not show in detail row&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-toggle</code></td>
                    <td>This specifies the column that will have the toggle button. Default will be the first column.</td>
                    <td><pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-hide=&quot;phone&quot;&gt;Column hidden on phones&lt;/th&gt;
        &lt;th data-toggle=&quot;true&quot;&gt;Column always shown&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-name</code></td>
                    <td>This will override the name of the column in the detail row.</td>
                    <td><pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-name=&quot;Date Of Birth&quot;&gt;DOB&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-type</code></td>
                    <td>This specifies the parser to use to retrieve a cell's value. Default will be 'alpha'. This is useful when trying to sort by numbers/dates.</td>
                    <td><pre>
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-type=&quot;alpha&quot;&gt;Name&lt;/th&gt;
        &lt;th data-type=&quot;numeric&quot;&gt;DOB&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-value</code></td>
                    <td>This specifies a value to use other than the text of the cell.</td>
                    <td><pre>
&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td data-value=&quot;370961043292&quot;&gt;3 Oct 1981&lt;/td&gt;
        &lt;td data-value=&quot;2&quot;&gt;Active&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-group</code></td>
                    <td>Used to group column headers together. This will also group the row details together.</td>
                </tr>
                <tr>
                    <td><code>data-editable</code></td>
                    <td>
                    	Used to mark columns as editable. Set it as true to make a column editable/modifiable.
                        By default if a cell contains any html input elements it will behave as editable/modifiable.
                        Set to false if you do not need it.
                    </td>
                    <td><pre>&lt;th data-editable='true'&gt;</pre></td>
                </tr>
                <tr class="footable-disabled">
                    <td colspan="3"><h4>Sorting Data Attributes</h3></td>
                </tr>
                <tr>
                    <td><code>data-sort</code></td>
                    <td>Used to disable sorting on the entire table</td>
                    <td><pre>
&lt;table data-sort=&quot;false&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-sort-ignore</code></td>
                    <td>Used to disable sorting on a specific column</td>
                    <td><pre>
&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;Sortable&lt;/td&gt;
        &lt;td data-sort-ignore=&quot;true&quot;&gt;Not Sortable&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-sort-initial</code></td>
                    <td>Sort a column when FooTable is loaded. Set it to "descending" to sort in descending order initially.</td>
                    <td>
                        <pre>
&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td data-sort-initial=&quot;true&quot;&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;</pre>
                        <pre>
&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td data-sort-initial=&quot;descending&quot;&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;</pre>
                    </td>
                </tr>
                <tr class="footable-disabled">
                    <td colspan="3">
                        <h4>Filter Data Attributes</h4>
                    </td>
                </tr>
                <tr>
                    <td><code>data-filter</code></td>
                    <td>The selector for the input field that will be used to filter your table.</td>
                    <td><pre>
&lt;input id=&quot;filter&quot; type=&quot;text&quot;&gt;
&lt;table data-filter=&quot;#filter&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-filter-minimum</code></td>
                    <td>Define the minimum number of characters needed before the table data is filtered. Default is 2 characters.</td>
                    <td><pre>
&lt;table data-filter-minimum=&quot;3&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-filter-timeout</code></td>
                    <td>Define the timeout for the delay before the table data is filtered. Default is 300 milliseconds.</td>
                    <td><pre>
&lt;table data-filter-timeout=&quot;1000&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-filter-text-only</code></td>
                    <td>Only filter by table cell text and ignore any data-values values.</td>
                    <td><pre>
&lt;table data-filter-text-only=&quot;true&quot;&gt;</pre></td>
                </tr>
                </tr>
                <tr class="footable-disabled">
                    <td colspan="3">
                        <h4>Pagination Data Attributes</h4>
                    </td>
                </tr>
                <tr>
                    <td><code>data-page-size</code></td>
                    <td>Set the number of rows per page. Default is 10 rows per page.</td>
                    <td><pre>
&lt;table data-page-size=&quot;5&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-page-first-text</code></td>
                    <td>Set the text used to navigate to the first page. Default is &laquo;.</td>
                    <td><pre>
&lt;table data-page-first-text=&quot;first&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-page-previous-text</code></td>
                    <td>Set the text used to navigate to the previous page. Default is &lsaquo;.</td>
                    <td><pre>
&lt;table data-page-previous-text=&quot;prev&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-page-next-text</code></td>
                    <td>Set the text used to navigate to the next page. Default is &rsaquo;.</td>
                    <td><pre>
&lt;table data-page-next-text=&quot;next&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-page-last-text</code></td>
                    <td>Set the text used to navigate to the last page. Default is &raquo;.</td>
                    <td><pre>
&lt;table data-page-last-text=&quot;last&quot;&gt;</pre></td>
                </tr>
                <tr>
                    <td><code>data-page</code></td>
                    <td>Set to false to disable pagination for a table when the pagination plugin is loaded. Default is true.</td>
                    <td><pre>
&lt;table data-page=&quot;false&quot;&gt;</pre></td>
                </tr>
            </tbody>
        </table>
	</div>
    <script type="text/javascript">
        $(function () {
            $('table tbody tr td code').addClass('footable-toggle');
            $('table').footable();
        });
    </script>
</body>
</html>
